<template>
  <div>
    <div class="table-title">
      <el-row class="table-row">
        <el-col :span="index==1?9:index==3?7:4" v-for="(item,index) in tableData.headers">{{ item.name }}</el-col>
      </el-row>
    </div>
    <div class="table-content">
      <vue-seamless-scroll class="text-dec warp" :data="tableData.data" :class-option="tableData.classOption">
        <el-row class="table-row" v-for="(item,index) in tableData.data">
          <el-col :span="5">
            <div>{{ item.name }}</div>
          </el-col>
          <el-col :span="9">
            <el-progress :percentage="item.percentage" :stroke-width="8"></el-progress>
          </el-col>
          <el-col :span="4">
            <div>{{ item.value }}</div>
          </el-col>
          <el-col :span="6">
            <ProgressEcharts :data="{name:item.name,value:item.progress}"></ProgressEcharts>
          </el-col>
        </el-row>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import ProgressEcharts from "@/components/echarts/devOps/ProgressEcharts";

export default {
  name: "TableBar",
  components:{vueSeamlessScroll,ProgressEcharts},
  props: {
    tableData: {
      type: Object,
      default() {
        return {}
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.table-row {
  padding: .8rem 0;
}
::v-deep .el-progress__text  {
  color: rgba(191, 217, 255, 0.85) !important;
}
::v-deep .el-progress-bar__inner{
  background:linear-gradient(to right,#FF6900,#FFC134) !important;
}
.table-content{
  height:70%;
  .text-dec {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}

</style>
